<template>
    <wxc-popup popup-color="white"
               :show="show"
               @wxcPopupOverlayClicked="popupOverlayBottomClick"
               pos="bottom"
               :height="height">
        <div class="demo-content">
            <div class="input-area">
                <textarea class="input" v-model="inputVal" rows="10"></textarea>
            </div>
            <div class="send-area">
                <text @click="submitForm" class="send-btn">发表</text>
            </div>
        </div>
    </wxc-popup>
</template>


<style>

    .demo-content {
        margin-top: 30px;
        flex-direction: row;
    }

    .wrapper {
        margin-top: 200px;
    }

    .input-area {
        width: 635px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .input {
        width: 610px;
        height: 240px;
        border-width: 1px;
        border-color: #d7d7d7;
        color: #272727;
        font-size: 30px;
    }

    .send-area {
        width: 100px;
        height: 240px;
        justify-content: center;
        align-items: center;
    }

    .send-btn {
        font-size: 30px;
        color: #01A65A;
    }


</style>

<script>
    import {WxcPopup} from 'weex-ui';
    import nw from '../network/nw.js'
    import stl from '../utils/stringUtils.js'

    export default {
        components: {WxcPopup},
        props: {
            show:{
                type:Boolean,
                default:false
            },
            params: {
                type: Object,
                default:{}
            },
            name:{
                type:String,
                default:''
            },
            isClearn:{
                type:Boolean,
                default:true,
            },
            url: {
                type: String
            },
            success: {
                type: Object
            },
            error: {
                type: Object
            },
            fail: {
                type: Object
            }
        },
        data: () => ({
            height: 300,
            inputVal: '',
            isSend:false
        }),
        methods: {
            //非状态组件，需要在这里关闭
            popupOverlayBottomClick() {
                this.$emit('closeLayerClicked', this.show)
                this.show = false;
            },
            //提交评论
            submitForm() {

               if(this.isSend){
                   return
               }

               this.isSend = true

                var modal = weex.requireModule('modal')



                if (stl.isNonEmpty(this.name)) {
                    this.isSend = false
                    return modal.toast({message: '参数名不能为空'})
                }

                if (stl.isNonEmpty(this.inputVal)) {
                    this.isSend = false
                    return modal.toast({message: '输入的内容不能为空'})
                }

                if (stl.isNonEmpty(this.url)) {
                    this.isSend = false
                    return modal.toast({message: '请求地址不能为空'})
                }

                this.params[this.name] =  encodeURIComponent(this.inputVal)
                var self = this

                nw.postDefine(this.url, {
                    data:self.params,
                    success(res) {
                        if (self.success && typeof self.success === 'function') {
                            self.success(res)
                        }
                        self.isSend = false
                        self.show = false
                        if(self.isClearn) {
                            self.inputVal = ''
                        }
                    },
                    fail(e) {
                        if (self.fail && typeof self.fail === 'function') {
                            self.fail(e)
                        }
                        self.isSend = false
                        self.show = false
                    },
                    error(e) {
                        if (self.error && typeof self.error === 'function') {
                            self.error(e)
                        }
                        self.isSend = false
                        self.show = false
                    }
                })
            }
        }
    }
</script>